<template recyclable>
    <div class="card-white-wrapper" @click="onCardClick">
        <div class="course-info">
            <text class="course-name">{{itemValue.ex.name}}</text>
            <text class="course-ratio" v-if="itemValue.ex.ratio">学习进度{{itemValue.ex.ratio}}%</text>
            <wxc-progress bar-color='#00BB9A'  :bar-radius="16" v-if="itemValue.ex.ratio" :value="itemValue.ex.ratio" :bar-width="400"></wxc-progress>
        </div>
        <image v-if="itemValue.ex.image" :src="itemValue.ex.image" class="product-img"></image>
    </div>
</template>

<script>
  import { WxcProgress } from 'weex-ui'

  export default {
    props: {
      itemValue: {
        type: Object, default: () => {
          return {ex: {}}
        },
      },
      itemIndex: {type: Number, default: -1},
      onItemClick: {type: Function},
    },
    components: {WxcProgress},
    methods: {
      onCardClick () {
        this.onItemClick && this.onItemClick(this.itemIndex)
      },
    },
    data () {
      return {}
    },
  }
</script>
<style scoped  lang="scss">
    @import '../../config/styles.scss';
    .card-white-wrapper {
        height:220px;
        background:#FFFFFF;
        flex-direction: row;
        padding:30px;
        justify-content:space-between;
        box-shadow: $--box-shadow-color;
    }
    .course-info{
        width:430px
    }
    .product-img {
        width: 216px;
        height: 154px;
    }
    .course-name{
        font-size:36px;
        font-weight:400;
        color:#434A54;
    }
    .course-ratio{
        margin-top:50px;
        margin-bottom:5px;
        font-size:24px;
        color:#999999;
    }
</style>
